<template>
  <div>
    <div class="w-full h-[77px] flex justify-center items-center flex-col">
      <div class="text-[14px] font-bold">平安室内装修（不记名）</div>
      <div class="mt-[5px] text-[10px]">由中国平安财产保险股份有限公司承保</div>
    </div>
    <!-- 保险日期 -->
    <div>
      <payOrderTitle title="保险日期"></payOrderTitle>
      <div class="p-[15px]">
        <div class="flex items-center justify-between">
          <div class="flex text-[12px]">
            <div>生效日期</div>
            <div class="ml-[50px]">2022-11-11 00:00:00</div>
          </div>
          <div>
            <img
              :src="getAssetsFile('home/date.png')"
              class="w-[14px] h-[14px]"
            />
          </div>
        </div>
        <div class="border-b border-[#ECECEC] my-[15px]"></div>
        <div class="flex items-center justify-between">
          <div class="flex text-[12px]">
            <div>结束日期</div>
            <div class="ml-[50px]">2022-11-11 00:00:00</div>
          </div>
          <div>
            <img
              :src="getAssetsFile('home/date.png')"
              class="w-[14px] h-[14px]"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 投保人信息 -->
    <div>
      <payOrderTitle title="投保人信息"></payOrderTitle>
      <div>
        <payOrderTbrxx></payOrderTbrxx>
      </div>
    </div>
    <!-- 附加被保人 -->
    <div>
      <payOrderTitle title="附加被保人"></payOrderTitle>
      <div>
        <payOrderFjInsured></payOrderFjInsured>
      </div>
    </div>
    <!-- 标的要素 -->
    <div>
      <payOrderTitle title="标的要素"></payOrderTitle>
      <div>
        <payYs></payYs>
      </div>
    </div>
    <!-- 保险责任 -->
    <div>
      <payOrderTitle title="保险责任"></payOrderTitle>
      <div>
        <responsibility></responsibility>
      </div>
    </div>
    <!-- 资料文件 -->
    <div>
      <payOrderTitle title="资料文件"></payOrderTitle>
      <div>
        <dataFiles></dataFiles>
      </div>
    </div>
    <div class="flex px-[5px]" v-if="type == '1'">
      <div @click="checked = !checked" class="mt-[2px]">
        <img
          v-if="checked"
          :src="getAssetsFile('insure/active.png')"
          class="w-[14px] h-[14px]"
        />
        <img
          v-else
          :src="getAssetsFile('insure/noactive.png')"
          class="w-[14px] h-[14px]"
        />
      </div>
      <div class="ml-[10px] text-[12px]">
        购买前，请仔细阅读<span class="text-[#EF6800]">《投保须知》</span
        ><span class="text-[#EF6800]">《特别约定》</span
        ><span class="text-[#EF6800]">《产品条款》</span
        ><span class="text-[#EF6800]">《保单样本》</span>
      </div>
    </div>
    <div class="w-full h-[49px] flex items-center" v-if="type == '1'">
      <div
        class="w-full h-full flex justify-center items-center text-[#666666]"
      >
        修改
      </div>
      <div
        class="min-w-[295px] h-[49px] flex justify-center items-center text-white"
        style="background: linear-gradient(180deg, #f3a140 0%, #f38e40 100%)"
      >
        确认支付
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import payOrderTitle from "./payOrderTitle.vue";
import payOrderTbrxx from "./payOrderTbrxx.vue";
import getAssetsFile from "@/utils/getImageurl";
import payOrderFjInsured from "./payOrderFjInsured.vue";
import payYs from "./payYs.vue";
import responsibility from "./responsibility.vue";
import dataFiles from "./dataFiles.vue";
import { ref, defineOptions, ComponentPublicInstance, defineExpose } from "vue";

const type = ref<string>(); //1是待支付详情2是保单详情
const checked = ref(false);
interface IInstance extends ComponentPublicInstance {
  type: string;
}
defineOptions({
  beforeRouteEnter(_, from, next) {
    next((vm) => {
      const instance = vm as IInstance;
      instance.type = from.query.type as string;

      // type.value = from.query.type as string;
    });
  },
});
defineExpose({
  type,
});
</script>
<style scoped lang="scss"></style>
